<template>
  <div class="chart-container">
    <chart height="100%" width="100%" :chart-data="ChartData" />
  </div>
</template>

<script>
import Chart from '@/components/Charts/MixChart'
import { getSexRecent } from '@/api/dataanalysis'

export default {
  name: 'LineChart',
  components: { Chart },
  data() {
    return {
      ChartData: {
        male: [],
        female: [],
        total: []
      }
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    getdata() {
      getSexRecent().then((res) => {
        const josn1 = {
          male: [],
          female: [],
          total: []
        }
        for (let i = 0; i < res.data.length; i++) {
          josn1.male[i] = res.data[i].boy
          josn1.female[i] = res.data[i].girl
          josn1.total[i] = josn1.male[i] + josn1.female[i]
        }
        this.ChartData = josn1
      })
    }
  }
}
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 800px;
}
</style>
